<template>
  <div class="container">
    <p>姓名：{{obj.name}} <button @click="updateName">修改</button></p>
    <p>年龄：{{obj.age}} <button @click="updateAge">修改</button></p>
    <p>{{count}} <button @click="count++">修改</button></p>
    <hr>
    <p>姓名：{{obj.user.gender}} <button @click="obj.user.gender='女'">修改</button></p>
  </div>
</template>
<script>
import { reactive, watch, ref} from 'vue'
export default {
  name: 'App',
  setup () {
    // 侦听器：监听数据的变化，然后去做其他事情
    const obj = reactive({
      name: 'tom',
      age: 18,
      user: {
        gender: '男',
        password: 123456
      }
    })
    const updateName = () => {
      obj.name = 'jack'
    }
    const updateAge = () => {
      obj.age = 20
    }


    // 1. 监听一个数据 数据的变化
    // 第一个参数：监听的对象，第二个参数：变化后回调函数
    // watch(obj, (newVal, oldVal) => {
    // 暂时无法区分 
    //   // console.log(newVal)
    //   // console.log(oldVal)
    // })

    const count = ref(0)

    // watch(count, (newVal, oldVal) => {
    //   console.log(newVal)
    //   console.log(oldVal)
    // })

    // 2. 监听多个数据 数据的变化
    // watch([obj,count],()=>{
    //   console.log('ok')
    // })


    // 3. 监听对象中的一个属性变化 
    // watch(()=>obj.name , ()=>{
    //   console.log('ok')
    // })


    // 4. 监听对象中的一个属性，当是他是复杂数据类型
    // 第三个参数：配置对象
    // watch(()=>obj.user,()=>{
    //   console.log('ok')
    // },{
    //   // 开启深度监听
    //   deep: true
    // })


    // 5. 默认执行
    watch(()=>obj.user,()=>{
      console.log('ok')
    },{
      // 开启深度监听
      deep: true,
      // 初始化执行
      immediate: true
    })




    return {obj, updateAge, updateName, count}
  }
}
</script>
<style scoped lang="less"></style>
